<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="homepage">
    <van-swipe  class="my-swipe" :autoplay="3000" indicator-color="#888888">
      <van-swipe-item v-for="item in imagesList" :key="item.id">
        <img :src="`http://liufusong.top:8080${item.imgSrc}`" alt="">
      </van-swipe-item>
    </van-swipe>
    <div class="main">
      <div class="content">
        <span class="ctt-text">
            上海
        </span>
        <van-search
        v-model="value"
        placeholder="请输入小区或地址"
        class="ctt-search"
        />
      </div>
      <van-icon name="user-o" class="van-icon"/>
    </div>
    <div class="rentnav">
      <router-link to="/" class="rentnav-ctt">
          <van-icon name="home-o" size="30px"/>
          <!-- 到这一步了 -->
          <p class="rentnav-ctt-text">整租</p>
        </router-link>
        <router-link to="/" class="rentnav-ctt">
          <van-icon name="friends-o" size="30px"/>
          <p>合租</p>
        </router-link>
        <router-link to="/" class="rentnav-ctt">
          <van-icon name="guide-o" size="30px"/>
          <p>地图找房</p>
        </router-link>
        <router-link to="/" class="rentnav-ctt">
          <van-icon name="wap-home-o" size="30px"/>
          <p>去出租</p>
        </router-link>
    </div>
  </div>
</template>

<script>
import { testAPI } from '@/api'
export default {
  data () {
    return {
      imagesList: []
    }
  },
  async created () {
    const res = await testAPI()
    this.imagesList = res.data.body
  }
}
</script>
<style scoped lang="less">
  .homepage{
    position: relative;
  }
  .my-swipe .van-swipe-item {
    color: #cdcccc;
    height: 212px;
    text-align: center;
  }
  img{
    width: 100%;
    height: 100%;
  }
  /deep/ .van-swipe__indicator{
    width: 7px;
    height: 7px;
  }
  .main{
    height: 34px;
    overflow: hidden;
    position: absolute;
    top: 20px;
    padding-left: 20px;
    display: flex;
    height: 50px;
    font-size: 18px;
    color: #fff;
  }
  .van-icon{
    width: 50px;
    text-align: center;
    line-height: 50px;
  }
  .content{
    display: flex;
    flex: 1;
    line-height: 34px;
    font-size: 14px;
  }
  .ctt-text{
    display: block;
    width: 50px;
    background-color: #fff;
    box-sizing: border-box;
    height: 34px;
    margin-top: 8px;
    line-height: 34px;
    border-radius:3px 0 0 3px;
    padding-left: 5px;
    color: #000;
    position: relative;
  }
  .ctt-text::before{
    content: '';
    display: block;
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    border-top: 3px solid transparent;
    border-left: 3px solid transparent;
    transform: rotate(45deg);
    position: absolute;
    bottom: 16px;
    right: -2px;
  }
  .van-search{
    margin-top: 8px;
    height: 34px;
    width: 250px;
    border-radius: 0 3px 3px 0;
  }
  /deep/ .van-search__content{
    background-color: #fff;
  }
  .rentnav{
    width: 375px;
    height: 87.75px;
    display: flex;
    flex: 1;
  }
  .rentnav-ctt{
    flex: 1;
    text-align: center;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .rentnav-ctt {
    font-size: 12px !important;
  }

</style>
